import { atom, useAtomValue, useSetAtom } from "jotai";import { derive } from "jotai-derive";import { Suspense, useCallback, useEffect } from "react";import { userAtom, UserRepo } from "./userAtom";const uppercaseNameDeriveAtom = derive([userAtom], (user) =>
function UserDisplayDerive() { const user = useAtomValue(userAtom);
const uppercaseName = useAtomValue(uppercaseNameDeriveAtom);
<strong>name</strong>: {uppercaseName} <strong>e-mail</strong>: {user.email}const uppercaseNameVanillaAtom = atom(async (get) => { const user = await get(userAtom);
return user.name.toUpperCase();
function UserDisplayVanilla() { const user = useAtomValue(userAtom);
const uppercaseName = useAtomValue(uppercaseNameVanillaAtom);
<strong>name</strong>: {uppercaseName} <strong>e-mail</strong>: {user.email}let deriveSuspensions = 0;
let vanillaSuspensions = 0;
const deriveEl = document.getElementById("derive-suspensions"); deriveEl.innerText = `Suspensions: ${deriveSuspensions}`;